<!doctype html>
<html>
<head>
   <!--    <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0"> -->
<meta charset="utf-8">
<title>首页</title>
</head>
<body>
<el-main>

                    <div class="content-main">
                        <div class="msg-content">
                            <div class="block panel-inner">
                                <div class="avatar">
                                    <el-avatar icon="el-icon-check"></el-avatar>

                                </div>
                                <div class="title">
                                    <span class="msg-title">我的上报审批</span>
                                    <span class="msg-total">本月 ( 0 ) 项</span>
                                </div>
                                <div class="msg-counts">
                                    <label class="item">
                                        <span>已审批（项）</span>
                                        <span style="color: #000">0</span>
                                    </label>
                                    <label class="item">
                                        <span>审批中（项）</span>
                                        <span>0</span>
                                    </label>
                                    <label class="item">
                                        <span>已退回（项）</span>
                                        <span>0</span>
                                    </label>
                                </div>
                            </div>
                            <div class="block panel-inner">
                                <div class="avatar">
                                    <el-avatar icon="el-icon-check"></el-avatar>

                                </div>
                                <div class="title">
                                    <span class="msg-title">待我审批</span>
                                    <span class="msg-total">本月 ( 1 ) 项</span>
                                </div>
                                <div class="msg-counts">
                                    <label class="item">
                                        <span>已审批（项）</span>
                                        <span style="color: #000">0</span>
                                    </label>
                                    <label class="item">
                                        <span>未审批（项）</span>
                                        <span>0</span>
                                    </label>
                                    <label class="item">
                                        <span>已退回（项）</span>
                                        <span>0</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="msg-content">
                            <div class="block panel-inner">
                                <div class="avatar">
                                    <el-avatar icon="el-icon-check"></el-avatar>

                                </div>
                                <div class="title">
                                    <span class="msg-title">我的计划</span>
                                    <span class="msg-total">本月 ( 0 ) 项</span>
                                </div>
                                <div class="msg-counts">
                                    <label class="item">
                                        <span>已完成（项）</span>
                                        <span style="color: #000">0</span>
                                    </label>
                                    <label class="item">
                                        <span>未完成（项）</span>
                                        <span>0</span>
                                    </label>
                                </div>
                            </div>
                            <div class="block panel-inner">
                                <div class="avatar">
                                    <el-avatar icon="el-icon-check"></el-avatar>

                                </div>
                                <div class="title">
                                    <span class="msg-title">我的项目</span>
                                    <span class="msg-total">本月 ( 0 ) 项</span>
                                </div>
                                <div class="msg-counts">
                                    <label class="item">
                                        <span>已完成（项）</span>
                                        <span style="color: #000">0</span>
                                    </label>
                                    <label class="item">
                                        <span>未完成（项）</span>
                                        <span>0</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="msg-content">
                            <div class="block panel-inner">
                                <div class="avatar">
                                    <el-avatar icon="el-icon-check"></el-avatar>

                                </div>
                                <div class="title">
                                    <span class="msg-title">我的销售</span>
                                    <span class="msg-total">本月 ( 0 ) 项</span>
                                </div>
                                <div class="msg-counts">
                                    <label class="item">
                                        <span>已结款（项）</span>
                                        <span style="color: #000">0</span>
                                    </label>
                                    <label class="item">
                                        <span>未结款（项）</span>
                                        <span>0</span>
                                    </label>
                                </div>
                            </div>
                            <div class="block panel-inner">
                                <div class="avatar">
                                    <el-avatar icon="el-icon-check"></el-avatar>

                                </div>
                                <div class="title">
                                    <span class="msg-title">我的客户</span>
                                    <span class="msg-total">客户 ( 0 ) 人数</span>
                                </div>
                                <div class="msg-counts">
                                    <label class="item">
                                        <span>本月新增（个）</span>
                                        <span style="color: #000">0</span>
                                    </label>
                                    <label class="item">
                                        <span>本年累计（个）</span>
                                        <span>0</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="msg-content">
                            <div class="block panel-inner">
                                <div class="avatar">
                                    <el-avatar icon="el-icon-check"></el-avatar>

                                </div>
                                <div class="title">
                                    <span class="msg-title">我的采购</span>
                                    <span class="msg-total">本月 ( 0 ) 单</span>
                                </div>
                                <div class="msg-counts">
                                    <label class="item">
                                        <span>已入库（单）</span>
                                        <span style="color: #000">0</span>
                                    </label>
                                    <label class="item">
                                        <span>未入库（单）</span>
                                        <span>0</span>
                                    </label>
                                </div>
                            </div>
                            <div class="block panel-inner">
                                <div class="avatar">
                                    <el-avatar icon="el-icon-check"></el-avatar>

                                </div>
                                <div class="title">
                                    <span class="msg-title">我的应收</span>
                                    <span class="msg-total">本月 ( 0 ) 项</span>
                                </div>
                                <div class="msg-counts">
                                    <label class="item">
                                        <span>已完成（项）</span>
                                        <span style="color: #000">0</span>
                                    </label>
                                    <label class="item">
                                        <span>未完成（项）</span>
                                        <span>0</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="msg-content">
                            <div class="block panel-inner">
                                <div class="avatar">
                                    <el-avatar icon="el-icon-check"></el-avatar>

                                </div>
                                <div class="title">
                                    <span class="msg-title">我的应付</span>
                                    <span class="msg-total">本月 ( 0 ) 项</span>
                                </div>
                                <div class="msg-counts">
                                    <label class="item">
                                        <span>已完成（项）</span>
                                        <span style="color: #000">0</span>
                                    </label>
                                    <label class="item">
                                        <span>未完成（项）</span>
                                        <span>0</span>
                                    </label>
                                </div>
                            </div>
                            <div class="block panel-inner">
                                <div class="avatar">
                                    <el-avatar icon="el-icon-check"></el-avatar>

                                </div>
                                <div class="title">
                                    <span class="msg-title">我的客服</span>
                                    <span class="msg-total">本月 ( 0 ) 项</span>
                                </div>
                                <div class="msg-counts">
                                    <label class="item">
                                        <span>处理中（项）</span>
                                        <span style="color: #000">0</span>
                                    </label>
                                    <label class="item">
                                        <span>已处理（项）</span>
                                        <span>0</span>
                                    </label>
                                    <label class="item">
                                        <span>未处理（项）</span>
                                        <span>0</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="msg-content">
                            <div class="block panel-inner">
                                <div class="avatar">
                                    <el-avatar icon="el-icon-check"></el-avatar>

                                </div>
                                <div class="title">
                                    <span class="msg-title">我的绩效</span>
                                    <span class="msg-total">查看历史</span>
                                </div>
                                <div class="msg-counts">
                                    <label class="item">
                                        <span>今日</span>
                                        <span style="color: #000">0</span>
                                    </label>
                                    <label class="item">
                                        <span>本月</span>
                                        <span>0</span>
                                    </label>
                                </div>
                            </div>
                            <div class="block panel-inner">
                                <div class="avatar">
                                    <el-avatar icon="el-icon-check"></el-avatar>

                                </div>
                                <div class="title">
                                    <span class="msg-title">我的工资</span>
                                </div>
                                <div class="msg-counts">
                                    <label class="item">
                                        <span>本月（元）</span>
                                        <span style="color: #000">0</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="msg-content">
                            <div class="block panel-inner">
                                <div class="avatar">
                                    <el-avatar icon="el-icon-check"></el-avatar>

                                </div>
                                <div class="title">
                                    <span class="msg-title">我的申请</span>
                                    <span class="msg-total">本月 ( 0 ) 项</span>
                                </div>
                                <div class="msg-counts">
                                    <label class="item">
                                        <span>已完成（项）</span>
                                        <span style="color: #000">0</span>
                                    </label>
                                    <label class="item">
                                        <span>未完成（项）</span>
                                        <span>0</span>
                                    </label>
                                </div>
                            </div>
                            <div class="block panel-inner" style="opacity: 0">
                                <div class="avatar">
                                    <el-avatar icon="el-icon-check"></el-avatar>

                                </div>
                                <div class="title">
                                    <span class="msg-title">我的客服</span>
                                    <span class="msg-total">本月 ( 0 ) 项</span>
                                </div>
                                <div class="msg-counts">
                                    <label class="item">
                                        <span>处理中（项）</span>
                                        <span style="color: #000">0</span>
                                    </label>
                                    <label class="item">
                                        <span>已处理（项）</span>
                                        <span>0</span>
                                    </label>
                                    <label class="item">
                                        <span>未处理（项）</span>
                                        <span>0</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-main>

</body>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    .el-carousel__container {
        height: 340px;
    }

    .el-aside .el-carousel {
        margin: 5px;
        border: 2px solid #ccc;
        border-radius: 9px;
    }

    .rili {
        margin: 5px;
        border: 2px solid #ccc;
        border-radius: 9px;
        margin-top: 0px;
        border-top: none;
        padding: 20px 0 0 0;
    }

    .rili-block {
        border: 1px solid #ccc;
        /*padding: 20px;*/
    }

    .rili-date {
        display: block;
        width: 100%;
        font-size: 18px;
        border-bottom: 1px solid #ccc;
        text-align: center;
        padding: 10px 0;
    }

    .rili-day {
        font-size: 35px;
        color: blue;
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 5px;
    }

    .rili-time {
        font-size: 24px;
        color: red;
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 5px;
    }

    .rili-xingqi, .rili-nongli {
        display: block;
        width: 100%;
        text-align: center;
    }

    .rili-xingqi {
        font-size: 12px;
        line-height: 20px;
    }

    .rili-nongli {
        font-size: 12px;
        color: red;
        line-height: 20px;
    }

    .rili-buttom {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        align-content: center;
    }

    .rili-buttom .item {
        flex-grow: 0;
        margin-top: 10px;
    }

    .rili .el-badge__content.is-fixed {
        right: 0px;
    }

    .content-main {
        background-color: #f5f5f5;
        border: 1px solid #99bce8;
        margin-top: 5px;
    }

    .msg-content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .msg-content .block {
        width: 30%;
        height: 125px;
        border-radius: 8px;
        margin: 10px;
        background-color: #fff;

    }

    .msg-content .panel-inner {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .msg-content .panel-inner .avatar .el-avatar {
        background-color: #fff;
        color: #47a87f;
        border: 1px solid #47a87f;
        font-size: 36px;
    }

    .msg-content .panel-inner .avatar {
        margin-top: 20px;
        margin-left: 40px;
    }

    .msg-content .panel-inner .title, .msg-content .panel-inner .msg-counts {
        display: flex;
        flex-direction: column;
        margin: 20px;
    }

    .msg-content .panel-inner .title .msg-title {
        font-size: 20px;
    }

    .msg-content .panel-inner .title .msg-total {
        font-size: 12px;
        margin-top: 20px;
    }

    .msg-content .panel-inner .msg-counts .item {
        font-size: 12px;
        margin-bottom: 15px;
    }

    .msg-content .panel-inner .msg-counts .item span:last-child {
        font-size: 16px;
        color: red;
    }

    .demo-basic--circle, .button-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .button-list {
        margin: 5px;
        margin-bottom: 0px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        /*border: 2px solid #ccc;*/
        /*border-radius: 9px;*/
    }

    .button-list .block {
        flex: 1;
        display: flex;
        flex-direction: column;
        /*flex-grow: 1;*/
        margin-top: 10px;
    }

    .button-list .block .el-button{
        padding: 12px 5px !important;
    }


    .demo-basic--circle .block {
        flex: 1;
        display: flex;
        flex-direction: column;
        /*flex-grow: 1;*/
        margin-top: 15px;
        cursor: pointer;
        color: #8492a6;
    }

    .demo-basic--circle .block:hover {
        background-color: #e95352;
        color: #fff;
        border-radius: 8px;
    }

    .demo-basic--circle .block .title {
        margin-top: 10px;
        font-size: 14px;

        text-align: center;
    }

    .demo-basic--circle .el-avatar {
        display: inline-block;
        box-sizing: border-box;
        text-align: center;
        overflow: hidden;
        color: #fff;
        background: #f5f5f5;
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #f5f5f5;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #f5f5f5;
    }

    .el-header {
        height: 40px !important;
        background-color: #b81f1f;
        color: #fff;
    }

    .el-footer {
        background-color: #000;
        color: #A4A4A4;
        /*text-align: center;*/
        /*line-height: 60px;*/
    }

    .el-aside {
        background-color: #fff;
        color: #333;
        /*text-align: center;*/
        /*line-height: 200px;*/
    }

    .el-main {
        /*background-color: #E9EEF3;*/
        /*color: #333;*/
        padding: 0px;
        padding-top: 5px;
        /*text-align: center;*/
        /*line-height: 160px;*/
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        /*line-height: 260px;*/
    }

    .el-container:nth-child(7) .el-aside {
        /*line-height: 320px;*/
    }


    .el-row {
        margin-bottom: 20px;
    }

    .el-row:last-child {
        margin-bottom: 0;
    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #d8d8d8;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
        /*margin-top: 5px;*/
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .block .el-avatar>img{
        height: auto !important;
        margin: 22px auto;
        width: 36px;
    }
		
</style>
</html>
